<template>
	<view class="content">
	<z-paging ref="paging" v-model="dataList" @query="queryList">
	  <template #top>
		<view class="header">
		  <view class="back-button" @click="goBack">
			<uni-icons type="left" size="20" color="#000"></uni-icons>
		  </view>
		  <text class="title">{{ title }}</text>
		</view>
	  </template>
	
	  <view class="fan-list">
		<view class="fan-item" v-for="(item, index) in dataList" :key="index" @click="itemClick(item, index)">
		  <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
		  <view class="fan-info">
			<text class="fan-name">{{ item.nickname }}</text>
			<text class="fan-stats">动态{{ item.postCount }} | 粉丝{{ item.fansCount }}</text>
		  </view>
		  <button 
		          class="follow-btn" 
		          :class="{ followed: item.isFollow }" 
		          @click.stop="toggleFollow(item)"
		        >
		          {{ item.isFollow ? '已关注' : '关注' }}
		        </button>
		</view>
	  </view>
	</z-paging>
	 </view>
</template>

<script>
import { getFollowList, getFansList, postFollow } from '@/api/user'; // 引入获取关注列表和粉丝列表的接口

export default {
	props: {
	    listType: {
	      type: String,
	      required: true,
	    },
	  },
  data() {
    return {
		title: '', // 动态设置标题
		dataList: [],
    }
  },
   onLoad(options) {
      // 根据 type 参数设置标题
      if (options.type === 'follow') {
        this.title = '我的关注';
		this.listType = 'follow';  // 这里设置 listType 为 'follow'
      } else if (options.type === 'fans') {
        this.title = '我的粉丝';
		this.listType = 'fans';  // 这里设置 listType 为 'fans'
      }
    },
  methods: {
	  goBack() {
			uni.navigateBack();
	    },
      async queryList(pageNo, pageSize) {
		// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
		// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
		// 模拟请求服务器获取分页数据，请替换成自己的网络请求
		// 请求关注列表或粉丝列表数据
		try {
			let response;

			if (this.listType === 'follow') {
				response = await getFollowList(pageNo,pageSize); // 获取关注列表
			} else if (this.listType === 'fans') {
				response = await getFansList(pageNo,pageSize); // 获取粉丝列表
			}
			
			console.info(response);
			// 完成分页数据的加载
			this.$refs.paging.complete(response.data.list);
			} catch (error) {
				uni.showToast({ title: '加载失败，请重试', icon: 'none' });
			}
	},
	async toggleFollow(item) {
	      item.isFollow = !item.isFollow;
		  // const userId = uni.getStorageSync('userId');
		  // 在此处理实际的关注或取消关注逻辑，如发起 API 请求
		  const data = {
		  	followedId: item.followId,
		  	isFollow: item.isFollow,
		  };
		  await postFollow(data) 
		  	.then(response => {
		  		if (response.code == 200) {
		  			this.userInfo = response.data; 
		  		} else {
		  
		  		}
		  	})
		  	.catch(error => {
		  		console.error('点赞失败:', error);
		  	});
	    },
itemClick(item, index) {
    // 初始化 userId
    let userId = '';
    
    // 根据 listType 判断获取的 userId
    if (this.listType === 'fans') {
        userId = item.followId;
    } else if (this.listType === 'follow') {
        userId = item.followedId;
    }
    
    // 打印当前的 userId
    console.log("获取页面传递数据1", userId);
    
    // 导航到别人主页
    uni.navigateTo({
        url: `/packageMixture/pages/other/other?userId=${userId}`
    });
}

  }
}
</script>

<style scoped>
.content {
  width: 750rpx;
  min-height: 100vh;
  background-color: white;
  position: relative;
}

.header {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center; /* 水平居中 */
  padding-top:80rpx ;
  padding-bottom:30rpx ;
  padding-left: 32rpx;
  padding-right: 32rpx;
  position: relative;
}

.back-button {
  width: 64rpx;
  height: 64rpx;
  padding-top: 10rpx;
  align-items: center; /* 让图标在 back-button 内居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 32rpx; /* 确保在左侧 */
}

.title {
  font-size: 32rpx;
  font-weight: 400;
}

.fan-list {
  display: flex;
  flex-direction: column;
}

.fan-item {
  display: flex;
  height: 120rpx;
  align-items: center;
  padding: 10rpx 0;
  border-bottom: 1px solid #eee;
}

.avatar {
  width: 90rpx;
  height: 90rpx;
  margin-left: 24rpx;
  margin-right: 16rpx;
  border-radius: 50%;
}

.fan-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.fan-name {
  color: #181818;
  font-size: 30rpx;
  font-weight: 500;
}

.fan-stats {
  margin-top: 16rpx;
  color: #7B7B7B;
  font-size: 26rpx;
}

.follow-btn {
  width: 160rpx;
  height: 58rpx;
  margin-right: 32rpx;
  font-size: 18px;
  border-radius: 36rpx;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: background-color 0.3s, color 0.3s, border 0.3s;
}

.follow-btn.followed {
	background-color: transparent;
	/* 关注后的背景透明，模拟镂空效果 */
	color: #ACACAC;
	/* 文字颜色变为灰色 */
	border: 1px solid #ACACAC;
	/* 灰色边框 */
	font-size: 32rpx;
	padding: 10rpx 20rpx;

}
 
.follow-btn:not(.followed) {
  background-color: #2F6EF5;
  color: #ffffff;
  font-size: 32rpx;
  border: 1px solid #aaaaaa;
  display: flex;
   transition: background-color 0.3s, color 0.3s, border 0.3s;
  justify-content: center;
  align-items: center;
  text-align: center;
}

</style>